<template>
	<view>


		<u-navbar title="" @rightClick="rightClick" bgColor="#ffffff00" :autoBack="false">

			<template #center>
				<view></view>
			</template>
			<template #left>
				<view class="title">
					{{title}}
				</view>
			</template>
		</u-navbar>


		<view class="pr">
			<u-swiper :list="list" @change="e => current = e.current" height="660rpx" key-name="image">
				<template #indicator>
					<view class="indicator">
						<view class="indicator__dot" v-for="(item, index) in list" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</template>
			</u-swiper>
			
			<view class="box pa xp32 xbs">
				<searchs @focus="toPage('/pages/index/searchgoods')"></searchs>
				<view class="xflex-x-center h1">
					产品中心
				</view>
				
				
				
				<view class="goods">
					<view class="goodsItem pr" v-for="(item,index) in goods.list" :key="index" @click="toPage(`/pages/index/detail?id=${item.id}&title=${item.first}*${item.second}*${item.three}mm&img=${encodeURIComponent(item.image)}`)">
						<image class="goodsImg" :src="item.image" mode=""></image>
						<view class="goodsinfo pa xflex-y-center">
							<view class="goodsTitle">
								{{item.first}}x{{item.second}}x{{item.three}}mm
							</view>
							<view class="goodsValue">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			
			
		</view>



	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	
	import {getbanner,getcategory,indexconfig} from '@/network/home.js'
	
	
	import searchs from '@/components/search/searchs.vue'

	let list = ref([])
	let current = ref(0)
	
	let goods = reactive({
		list:[],
		name:''
	})
	
	getbanner().then(res=>{
		console.log(res);
		list.value = res.data
	})
	
	getcategory().then(res=>{
		console.log(res);
		goods.list = res.data
	})
	
	const toPage = (url) =>{
		console.log("=");
		uni.navigateTo({
			url:url
		})
	}
	
	let title = ref('')
	indexconfig().then(res=>{
		console.log(res);
		title.value = res.data.name
	})


</script>

<style lang="scss">
	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.indicator {
		@include flex(row);
		justify-content: center;
		margin-top: -56rpx;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}
	
	.box {
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		top: 630rpx;
		
		width: 750rpx;
		height: 1401rpx;
		// background: linear-gradient(0deg, #FFFFFF, #F5F5F5);
		background-color: #fff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}
	
	.h1 {
		font-weight: bold;
		font-size: 32rpx;
		color: #010101;
		
		padding-top: 49rpx;
	}
	
	.goods {
		margin-top: 91rpx;
		
		
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 32rpx 20rpx;
	}
	
	.goodsItem .goodsImg{
		width: 335rpx;
		height: 250rpx;
		// background: #000000;
		border-radius: 10rpx;
		
	}
	.goodsImg {
		filter: brightness(55%)
	}
	
	.goodsinfo {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	.goodsTitle{
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	
	.goodsValue{
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-top: 19rpx;
	}
</style>